<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{/fragment/OrderHeader :: OrderHeader}"/>
<head>
    <!-- meta data -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="stylesheet" href="style/assets/css/font-awesome.min.css" th:href="@{style/assets/css/font-awesome.min.css}"/>

    <!--linear icon css-->
    <link rel="stylesheet" href="style/assets/css/linearicons.css" th:href="@{style/assets/css/linearicons.css}"/>

    <!--animate.css-->
    <link rel="stylesheet" href="style/assets/css/animate.css" th:href="@{style/assets/css/animate.css}"/>

    <!--flaticon.css-->
    <link rel="stylesheet" href="style/assets/css/flaticon.css" th:href="@{style/assets/css/flaticon.css}"/>

    <!--slick.css-->
    <link rel="stylesheet" href="style/assets/css/slick.css" th:href="@{style/assets/css/slick.css}"/>
    <link rel="stylesheet" href="style/assets/css/slick-theme.css" th:href="@{style/assets/css/slick-theme.css}"/>

    <!--bootstrap.min.css-->
    <link rel="stylesheet" href="style/assets/css/bootstrap.min.css" th:href="@{style/assets/css/bootstrap.min.css}"/>

    <!-- bootsnav -->
    <link rel="stylesheet" href="style/assets/css/bootsnav.css" th:href="@{style/assets/css/bootsnav.css}" />

    <!--style.css-->
    <link rel="stylesheet" href="style/assets/css/style.css" th:href="@{style/assets/css/style.css}"/>

    <!--responsive.css-->
    <link rel="stylesheet" href="style/assets/css/responsive.css" th:href="@{style/assets/css/responsive.css}"/>
</head>
<body class="cbp-spmenu-push">
<section th:replace="~{/fragment/SectionButton :: SectionButton}"/>
<nav th:replace="~{fragment/nav :: nav}"/>
<div th:replace="~{/fragment/banner :: banner}"/>
<div class="container">
    <div class="explore-content">
        <div class="row">
            <div class="col-md-4 col-sm-6" th:each="OrderList : ${OrderList}">
                <div class="single-explore-item">
                    <div class="single-explore-img">
                        <img height="300px" width="300px" th:src="@{${OrderList.photo1}}" alt="explore image">
                    </div>
                    <div class="single-explore-txt bg-theme-1">
                        <h2 th:text="${OrderList.hotelTranslatedName}">xx大酒店</h2>
                        <p class="explore-rating-price">
                            <span class="explore-rating" th:text="|${OrderList.starRating}星|">星级</span>
                            <span class="explore-price-box" th:text="|房型:${OrderList.rtypeId}|">房型</span>
                            <span class="explore-price-box" th:text="|房间数:${OrderList.roomCount}|"></span>
                            <span class="explore-price-box">￥
                        <span class="explore-price" th:text="${OrderList.price}">价格</span>
										</span>
                        </p>
                        <div class="explore-person">
                            <div class="row">

                                <div class="col-sm-6">
                                    <p th:text="|入住时间:${OrderList.inTime}|">
                                    </p>
                                </div>
                                <div class="col-sm-6">
                                    <p th:text="|退房时间:${OrderList.outTime}|">
                                    </p>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-sm-12">
                                    <p th:text="|订单状态:${OrderList.orderState}|">
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="explore-open-close-part">
                            <div class="row">
                                <div class="col-sm-5">
                                    <a th:href="@{/order(orderNumber=${OrderList.orderNumber})}">
                                        <button class="close-btn open-btn">
                                            订单详情
                                        </button>
                                    </a>
                                </div>
                                <div class="col-sm-7">
                                    <div class="explore-map-icon">
                                        <a href="#"><i data-feather="map-pin"></i></a>
                                        <a href="#"><i data-feather="upload"></i></a>
                                        <a href="#"><i data-feather="heart"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{/fragment/footer :: footer}"/>
</body>
</html>